import { useDispatch, useSelector, NavLink } from 'umi';
import { useEffect, useState } from 'react';
import style from './RecommendedReading.less';
import moment from 'moment';
import classnames from 'classnames';
import IState from '@/models/type';

const RecommendedReading: React.FC = (props) => {
  moment.locale('zh-cn');
  const [i, setI] = useState(0);
  const state = useSelector((state: IState) => state.RecommendedReading);
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch({
      type: 'RecommendedReading/getRecommendedReadingList',
    });
    dispatch({
      type: 'RecommendedReading/getCategory',
    });
  }, []);
  let time: any[] = [];
  const [cssHeight, setCssHeight] = useState('');
  useEffect(() => {
    state.list.forEach((item) => {
      let timer = setTimeout(() => {
        setI(i + 1);
      }, 120);
      time.push(timer);
    });
    return () => {
      time.forEach((item) => {
        clearTimeout(item);
      });
      setCssHeight(style.active);
    };
  }, [i <= state.list.length ? i : state.list, state.list]);
  return (
    <div className={classnames(style.b)}>
      <div className={style.top}>
        <h3>推荐阅读</h3>
        <ul className={cssHeight}>
          {state.list.map((item, index) => {
            return (
              <li key={item.id} className={i > index ? style.active : ''}>
                <NavLink to={`/Article/Detail?id=${item.id}`}>
                  <span>{item.title}</span>
                  <span>·</span>
                  <span>{moment(item.publishAt, 'YYYYMMDD').fromNow()}</span>
                </NavLink>
              </li>
            );
          })}
        </ul>
      </div>
      <div className={style.bottom}>
        <h3>文章分类</h3>

        <ul className={cssHeight}>
          {state.list1.map((item, index) => {
            return (
              <li key={item.id} className={i > index ? style.active : ''}>
                <span>{item.label}</span>
                <span>共计{item.articleCount}篇文章</span>
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
};
export default RecommendedReading;
